<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Gramedia Writing Project</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

	<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
	<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
	<!--script src="js/less-1.3.3.min.js"></script-->
	<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
	
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
    <link href="css/tooltip.css" rel="stylesheet">

  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
  <![endif]-->

  <!-- Fav and touch icons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
  <link rel="shortcut icon" href="img/icon.png">
  
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/scripts.js"></script>
	<script type="text/javascript" src="js/css-pop.js"></script>
    
</head>

<body id="body">
<div class="container shadow">
	<div class="row clearfix">
		<div class="col-md-12 column"><!-- untuk iklan di atas header -->
        	<img src="img/1bfdf7e9746c4dd82708fac53e91967e.jpg" style="width:100%; height:50px;"/>
		</div>
	</div>
	<div class="row clearfix colorheader"><!-- untuk menu -->
		<div class="col-md-2 column logo">
			<img src="img/Logo GRP.jpg" />
		</div>
        <div class="col-md-10 column padd3" style="padding-right:14px;">
        	<nav class="navbar navbar-default navbar-static-top navbar-inverse header" role="navigation">
				<div class="navbar-header">
					 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
				</div>
				
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li>
							<a href="index2.html">Discover</a>
						</li>
                        <li>
							<a href="#">Event</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Panduan<strong class="caret"></strong></a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">Action</a>
								</li>
                                <li>
									<a href="#">Another action</a>
								</li>
                                <li>
									<a href="#">Something else here</a>
								</li>
								<li>
									<a href="#">Separated link</a>
								</li>
								<li>
									<a href="#">One more separated link</a>
								</li>
							</ul>
						</li>
					</ul>
					<form class="navbar-form navbar-left" role="search">
						<div class="form-group">
							<input class="form-control tinggitextbox" type="text">
						</div> <button type="submit" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-search"></span></button>
					</form>
					<ul class="nav navbar-nav navbar-right">
						<li>
							<a href="tulis cerita.html">Tulis Cerita</a>
						</li>
						<li class="dropdown">
							 <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;Jessyca<strong class="caret"></strong></a>
							<ul class="dropdown-menu">
								<li>
									<a href="profilku.html"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;Profil</a>
								</li>
								<li>
									<a href="daftar cerita.html"><span class="glyphicon glyphicon-list"></span>&nbsp;&nbsp;Daftar Cerita</a>
								</li>
								<li>
									<a href="draft cerita.html"><span class="glyphicon glyphicon-edit"></span>&nbsp;&nbsp;Draft Cerita</a>
								</li>
								<li>
									<a href="koleksiku.html"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;Koleksiku</a>
								</li>
                                <li>
									<a href="#"><span class="glyphicon glyphicon-log-out"></span>&nbsp;&nbsp;Logout</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</nav>
		</div>
	</div>
    
    <!-- start untuk content -->
	<div class="row clearfix">
    <div class="col-md-12 column content">
	<div class="row clearfix">
		<div class="col-md-3 column" ><!-- untuk kolom pertama -->
        	<div class="panel-group" id="panel-661231">
				<div class="panel panel-default padd4">
					<div class="hr3">
                    <span class="glyphicon glyphicon-bookmark"></span>
                      Profil
                    </div>
                    <hr class="hr2"/>
                    <img src="img/foto suri.jpg"  class="img-thumbnail fotoprofil2">
                    <br/>
                    <br/>
				</div>		
			</div>
            
            
            
            <br/>
            
            	<div class="hr3">
				 <span class="glyphicon glyphicon-tags"></span>&nbsp;&nbsp;Kegiatanku
                </div>
				<div class="list-group-item" style="border-left:none; border-right:none;">
					<span class="badge"></span><span class="glyphicon glyphicon-pencil"></span><a href="tulis cerita.html">&nbsp;&nbsp;Tulis Cerita</a>
				</div> 
                <div class="list-group-item" style="border-left:none; border-right:none;">
					<span class="badge"></span><span class="glyphicon glyphicon-envelope"></span><a href="tulis message.html">&nbsp;&nbsp;Kirim Pesan</a>
				</div> 
                 
				<br/>
                <div class="hr3">
                    <span class="glyphicon glyphicon-book"></span>&nbsp;&nbsp;Lokerku 
                </div>
                <div class="list-group-item" style="border-left:none; border-right:none;">
                    <span class="badge">14 post</span><a href="daftar cerita.html">&nbsp;&nbsp;Daftar Cerita</a>
                </div>
                <div class="list-group-item" style="border-left:none; border-right:none;">
                    <span class="badge">14 post</span><a href="koleksiku.html">&nbsp;&nbsp;Koleksiku</a>
                </div> 
		</div>
        
		<div class="col-md-9 column" > <!-- untuk kolom kedua yang dibagi 2 -->
			<div class="row clearfix">
				<div class="col-md-12 column">
                	<h8 class="judulprofil">Tulis Pesan</h8>
                    <br/>
                    <br/>
                    <div>
                    
                    <div class="list-group-item" style="border-left:none; border-right:none;">
                        <div class="row">
                        <div class="col-md-2">Subjek </div>
                            <div class="col-md-9 ">
                                <div class="col-sm-12">
                                    <input class="form-control tinggitextbox" id="inputEmail3" type="text">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item" style="border-left:none; border-right:none;">
                        <div class="row">
                        <div class="col-md-2">Kepada</div>
                            <div class="col-md-6 ">
                                <div class="input-group input-group-sm">&nbsp;&nbsp;&nbsp;
                                	<button type="button" class="btn btn-default tombolcari tinggitextbox tooltip-bottom" data-tooltip="cari dari list" onclick="popup('popUpDiv')"><span class="glyphicon glyphicon-list-alt"></span></button>
                                  	<span class="input-group-addon" style="margin-left:0;"><span class="glyphicon glyphicon-user"></span></span>
                                  	<input type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="btn-group">
                              <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
                              <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
                              <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
                              <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
                              <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button>
                              <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
                              <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
                              <div class="btn-group">
                                  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
                                    Times New Roman <span class="caret"></span>
                                  </button>
                                      <ul class="dropdown-menu" role="menu">
                                        <li><a href="#" style="background-color:#FFFFFF; border-bottom:#CCCCCC thin dotted; color:#333333">Calibri</a></li>
                                        <li><a href="#" style="background-color:#FFFFFF; border-bottom:#CCCCCC thin dotted; color:#333333">Arial</a></li>
                                        <li><a href="#" style="background-color:#FFFFFF; border-bottom:#CCCCCC thin dotted; color:#333333">San Serif</a></li>
                                      </ul>
                              </div>
                              <div class="btn-group">
                                  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
                                    10px <span class="caret"></span>
                                  </button>
                                      <ul class="dropdown-menu" role="menu">
                                        <li><a href="#" style="background-color:#FFFFFF; border-bottom:#CCCCCC thin dotted; color:#333333">12px</a></li>
                                        <li><a href="#" style="background-color:#FFFFFF; border-bottom:#CCCCCC thin dotted; color:#333333">14px</a></li>
                                        <li><a href="#" style="background-color:#FFFFFF; border-bottom:#CCCCCC thin dotted; color:#333333">16px</a></li>
                                      </ul>
                              </div>
                              
                              </div>
                        </div>
                        <textarea class="kotaktext">
                        
                        </textarea>
                        </div>
                        
                       <div class="row">
                        
                       <div class="col-xs-6">
                       <div class="row">
                            <div class="col-xs-11 padd6">
                            <div class="input-group input-group-sm">
                              <span class="input-group-addon">Upload File</span>
                              <input type="text" class="form-control" >
                            </div>
                            </div>
                            <button type="button" class="btn btn-default tombolcari tinggitextbox tooltip-bottom" data-tooltip="cari"><span class="glyphicon glyphicon-search"></span></button>
                       </div>
                       </div>
                       </div>
                    </div>
                    <br/>
                    <button type="submit" class="btn btn-danger btn-sm">Kirim</button>
                    <button type="submit" class="btn btn-danger btn-sm">Batal</button>
                    </div>

                </div>
                
                </div>
            </div>
		</div>
    </div>
	<!-- end untuk content -->
	
    <!-- untuk iklan -->
	<div class="row clearfix">
		<div class="col-md-12 column">
		</div>
	</div>
    
    <!-- untuk footer -->
    <br/>
	<div class="row clearfix">
		<div class="col-md-12 column" style="min-height:60px; background-color:#333333; padding-top:10px; font-size:12px">
        	<table style="width:100%; color:#CCCCCC; padding-top:15px; padding-bottom:15px;">
            	<tr>
                	<td>Copyright @Gramedia 2014</td>
                    <td style="border-left:thin solid #919191; width:20%; padding-right:70px;"><strong>&nbsp;&nbsp;&nbsp;&nbsp;Join Us :</strong><br/>
                    	<div class="col-md-3"><img src="img/facebook-icon.png" /></div>
                        <div class="col-md-3"><img src="img/google-plus-icon.png" /></div>
                        <div class="col-md-3"><img src="img/twitter-icon.png" /></div>
                        <div class="col-md-3"><img src="img/blogger-icon.png" /></div>
                    </td>
                </tr>
            </table>
            <br/>
		</div>
	</div>
</div>
</div> 
<!-- start pop up daftar email -->
                     <div id="blanket" style="display:none; "></div>
                     <div id="popUpDiv" style="display:none; background-color:#FFFFFF; width:50%;">
                        <div>
                        	<h8 class="judulprofil">Daftar Alamat Email</h8>
                            <div class="hr5"></div>
                            <br/>
                        	<div class="col-xs-8" style="padding-left:0;">
                                <div class="input-group input-group-sm">
                                  <span class="input-group-addon">Cari Email</span>
                                  <input type="text" class="form-control" >
                                </div>
                            </div>
                            <button type="button" class="btn btn-default tombolcari tinggitextbox tooltip-bottom" data-tooltip="cari"><span class="glyphicon glyphicon-search"></span></button>
                            <br/>
                            <br/>
                            <div style="border:thin solid #999999; padding:5px; background-color:#CCCCCC"
                            <br/>
                            <div class="row clearfix">
								<div class="col-md-6 column">
                                		<div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Jessica
                                          </label>
                                        </div>
                                        <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Claudia
                                          </label>
                                        </div>
                                        <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Rebecca
                                          </label>
                                        </div>
                                        <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Jessica
                                          </label>
                                        </div>
                                        <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Claudia
                                          </label>
                                        </div>
                                </div>
                                <div class="col-md-6 column">
                                		<div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Jessica
                                          </label>
                                        </div>
                                        <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Claudia
                                          </label>
                                        </div>
                                        <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Rebecca
                                          </label>
                                        </div>
                                        <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Jessica
                                          </label>
                                        </div>
                                        <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Claudia
                                          </label>
                                        </div>
                                </div>
                                <ul class="pagination pagination-sm padd8">
                                    <li>
                                        <a href="#">Prev</a>
                                    </li>
                                    <li>
                                        <a href="#">1</a>
                                    </li>
                                    <li>
                                        <a href="#">2</a>
                                    </li>
                                    <li>
                                        <a href="#">3</a>
                                    </li>
                                    <li>
                                        <a href="#">4</a>
                                    </li>
                                    <li>
                                        <a href="#">5</a>
                                    </li>
                                    <li>
                                        <a href="#">Next</a>
                                    </li>
                            </ul>
                            </div>
                            <br/>
                            </div>
                            <br/>
                            <button type="submit" class="btn btn-danger btn-sm">Pilih</button>
                            <button type="submit" class="btn btn-danger btn-sm" onclick="popup('popUpDiv')">Batal</button>
                            <br/>
                            <br/>
                     </div>
                     <!-- end pop up form -->
</body>
</html>
